<!DOCTYPE html>
<html>
<head>
  <title>在线视频软件</title>
  <meta http-equiv="X-UA-Compatible" content="IE=9" />
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <meta http-equiv="Cache-Control" content="max-age=135000" />
  <link rel="stylesheet" href="../res/layx/layx.min.css">
  <script src="../res/layx/layx.min.js"></script>
  <link href="../res/videojs7.0.3/videojs.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/video.js/7.0.3/video.js"></script>
  <script src="https://cdn.bootcss.com/video.js/7.0.3/lang/zh-CN.js"></script>
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    if (typeof module === 'object') {
      window.jQuery = window.$ = module.exports;
    };

  </script>
  <script src="https://cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
  <script src="https://cdn.bootcss.com/screenfull.js/3.3.0/screenfull.js"></script>
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      border-radius: 2px;
      border: 1px solid #2a2a2a;
      background: #000;
    }
    /*播放器设置*/
    .video-js {
      font-size: 10px;
      color: #fff;
    }

    .vjs-sublime-skin .vjs-big-play-button {
      font-size: 8em;
      line-height: 1.5em;
      height: 1.5em;
      width: 3em;
      border: 0;
      border-radius: 0.3em;
      left: 50%;
      top: 50%;
      margin-left: -1.5em;
      margin-top: -0.75em;
    }

    .video-js .vjs-control-bar, .video-js .vjs-big-play-button, .video-js .vjs-menu-button .vjs-menu-content {
      background-color: #2B333F;
      background-color: rgba(43, 51, 63, 0.7);
      background-color: transparent;
    }

    .video-js .vjs-slider {
      background-color: #73859f;
      background-color: rgba(115, 133, 159, 0.5);
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      height: 6.5px;
    }

    .video-js .vjs-volume-level, .video-js .vjs-play-progress, .video-js .vjs-slider-bar {
      background: #fff;
    }
    
    .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div, .video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-tooltip-progress-bar {
      height: 6.5px;
    }

    .video-js .vjs-load-progress {
      background: ligthen(#73859f, 25%);
      background: rgba(115, 133, 159, 0.5);
    }

    .video-js .vjs-load-progress div {
      background: ligthen(#73859f, 50%);
      background: rgba(115, 133, 159, 0.75);
    }
    .vjs-sublime-skin .vjs-poster {
      outline: none;
      outline: 0;
    }
    .vjs-sublime-skin:hover .vjs-big-play-button {
      background-color: transparent;
    }
    .vjs-sublime-skin .vjs-fullscreen-control:before, .vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:before {
      content: '';
    }
    .vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control {
      background: #fff;
    }
    .vjs-sublime-skin .vjs-fullscreen-control {
      border: 3px solid #fff;
      box-sizing: border-box;
      cursor: pointer;
      margin-top: -7px;
      top: 50%;
      height: 14px;
      width: 22px;
      margin-right: 10px;
    }
    .vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after {
      background: #000;
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 5px;
      width: 5px;
    }
    .vjs-sublime-skin .vjs-progress-holder {
      margin: 0;
    }
    .vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after {
      border-radius: 2px;
      display: block;
      height: 6.5px;
    }
    .vjs-sublime-skin .vjs-progress-control .vjs-load-progres, .vjs-sublime-skin .vjs-progress-control .vjs-play-progress {
      border-radius: 2px;
      height: 6.5px;
    }
    .vjs-sublime-skin .vjs-playback-rate {
      display: none;
      /* Remove Playback Rate */
    }
    .vjs-sublime-skin .vjs-progress-control {
      margin-right: 50px;
    }
    .vjs-sublime-skin .vjs-time-control {
      right: 55px;
    }
    .vjs-sublime-skin .vjs-volume-menu-button:before {
      width: 1.2em;
      z-index: 1;
    }
    .vjs-sublime-skin .vjs-volume-menu-button .vjs-menu, .vjs-sublime-skin .vjs-volume-menu-button:focus .vjs-menu, .vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active .vjs-menu {
      display: block;
      opacity: 1;
    }
    .vjs-sublime-skin .vjs-volume-menu-button, .vjs-sublime-skin .vjs-volume-panel {
      width: 6em;
      position: absolute;
      right: 0;
      margin-right: 30px;
    }
    .vjs-sublime-skin .vjs-volume-menu-button .vjs-menu-content, .vjs-sublime-skin .vjs-volume-menu-button:hover, .vjs-sublime-skin .vjs-volume-menu-button:focus, .vjs-sublime-skin .vjs-volume-menu-button.vjs-slider-active, .vjs-sublime-skin .vjs-volume-panel .vjs-volume-control, .vjs-sublime-skin .vjs-volume-panel:hover, .vjs-sublime-skin .vjs-volume-panel:focus, .vjs-sublime-skin .vjs-volume-panel.vjs-slider-active {
      width: 6em;
    }
    .vjs-sublime-skin .vjs-volume-menu-button .vjs-menu {
      left: 23px;
    }
    .vjs-sublime-skin .vjs-mouse-display:before, .vjs-sublime-skin .vjs-play-progress:before, .vjs-sublime-skin .vjs-volume-level:before {
      content: '';
      /* Remove Circle From Progress Bar */
    }
    .vjs-sublime-skin .vjs-mouse-display:after, .vjs-sublime-skin .vjs-play-progress:after, .vjs-sublime-skin .vjs-time-tooltip {
      width: 5.5em;
    }
    .vjs-sublime-skin .vjs-audio-button {
      display: none;
    }
    .vjs-sublime-skin .vjs-volume-bar {
      background: url();
      background-size: 22px 14px;
      background-repeat: no-repeat;
      height: 100%;
      width: 100%;
      max-width: 22px;
      max-height: 14px;
      margin: 7px 4px;
      border-radius: 0;
    }
    .vjs-sublime-skin .vjs-volume-level {
      background: url();
      background-size: 22px 14px;
      background-repeat: no-repeat;
      max-width: 22px;
      max-height: 14px;
      height: 100%;
    }
    /* New for VideoJS v6 */

    .vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:active, .vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:focus, .vjs-sublime-skin .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
      width: 6em;
      transition-property: none;
    }
    .vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal {
      width: 3em;
      height: auto;
    }
    .vjs-sublime-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control {
      transition-property: none;
    }
    .vjs-sublime-skin .vjs-fullscreen-control .vjs-icon-placeholder {
      display: none;
      /* Remove Duplicate Fullscreen Icon */
    }
    .vjs-sublime-skin .vjs-volume-panel .vjs-mute-control {
      width: 2em;
      z-index: 1;
      padding: 0;
    }
    .vjs-sublime-skin .vjs-volume-panel .vjs-volume-control {
      display: inline-block;
      position: relative;
      left: 5px;
      opacity: 1;
      width: 3em;
      height: auto;
    }
    /*播放器*/

    #myTab {
      max-height: 30px;
      min-height: 30px;
      background: #2a2a2a;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #2a2a2a;
    }
    .nav > li > a {
      color: #fff;
      padding: 2px 10px;
    }
    .nav > li.active > a:hover {
      color: #555 !important;
      cursor: default;
      background-color: #fff;
    }
    #main {
      height: calc(100% - 30px);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: #2a2a2a;
      overflow: hidden
    }
    #right {
      height: 100%;
      max-width: 150px;
      min-width: 150px;
      color: #aaa;
      background-color: #666
    }
    #center {
      height: 100%;
      width: calc(100% - 0px);
      background-color: #000
    }
    #yingshileft {
      border: 0px solid red;
      background: #333;
      color: #fff;
      width: 80px;
      height: 100%;
      overflow: auto;-webkit-app-region:drag
    }
    #yingshileft > div {
      height: 50px;
      line-height: 50px;
      padding: 5px;
      border-bottom: 1px solid #ddd;
      -webkit-app-region:no-drag
    }
    #yingshileft > div:hover {
      background: #fff;
      color: #333;
      height: 50px;
      line-height: 50px;
      border-left: 5px solid #333;
    }
    #yingshiright {
      border: 0px solid red;
      width: 100%;
    }
  </style>
  <script type="text/javascript">
    // var dbmysql = require('./utils/mysqleasy.js');
    var type = '';
    var address = '';
    var user = '';
    var pass = '';
    var port = '';
    var database = '';
    // require('./renderer.js');

  </script>
</head>
<body>
<h4 id="vediotitle" style="position:fixed;top:-0px;left:10px;color:#fff;height:25px;font-size:12px">标题</h4>
<div id="top" style="-webkit-app-region:drag" style="position: relative;">
  <ul id="myTab" class="nav nav-tabs">
    <li style="-webkit-app-region:no-drag"><a href="#home" data-toggle="tab">播放器</a></li>
    <li style="-webkit-app-region:no-drag" class="active"><a href="#jingpin" data-toggle="tab">影视大全</a></li>
    <!-- <li class="dropdown" style="-webkit-app-region:no-drag">
        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">更多<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jisuyunbo" tabindex="-1" data-toggle="tab">极速云播</a></li>
            <li><a href="#yongjiuyun" tabindex="-1" data-toggle="tab">永久云</a></li>
            <li><a href="#zuidaziyuan" tabindex="-1" data-toggle="tab">最大资源</a></li>
        </ul>
    </li> -->
  </ul>
  <span style="position:fixed;top:6px;right:50px;-webkit-app-region:no-drag">
    <img src="../res/set.png" width="15" height="15" alt="" onclick="showRizhi()">
  </span>
  <span style="position:fixed;top:6px;right:20px;-webkit-app-region:no-drag">
    <img src="../res/close.png" width="12" height="12" alt="" onclick="var ipc = require('electron').ipcRenderer;ipc.send('window-close');">
  </span>
</div>
<div id="main">
  <div id="center">
    <div id="myTabContent" class="tab-content" style="height:calc(100% - 0px);border:0px solid red">
      <div class="tab-pane fade " id="home" style="height:100%;border:0px solid red;position: relative;z-index: 11">
        <video id="videoCon" class="video-js  vjs-sublime-skin" controls preload="auto" width="100%" data-setup='{}'>
        </video>
        <div style="position:fixed;top:30px;left:0px;width:100%;height:calc(100% - 60px);background:#ddd;opacity:0;-webkit-app-region:drag"></div>
        <h4 id="videoMsg" style="display:none;position:fixed;top:50%;left:calc(50% - 40px);background:#000;color:#fff;padding:5px;border-radius:5px;">
          加载中...</h4>
      </div>
      <div class="tab-pane fade in active" id="jingpin" style="height:100%;border:0px solid red;background: #fff;display:flex;">
        <div id="yingshileft">
          <div class="yingshileft-child">精品电影</div>
          <div class="yingshileft-child">极速云播</div>
          <div class="yingshileft-child">永久云</div>
          <div class="yingshileft-child">最大资源</div>
          <div class="yingshileft-child">酷播资源</div>
          <div class="yingshileft-child">OK资源</div>
        </div>
        <div id="yingshiright">
          <div style="display:block;height:100%;width:100%">
            <webview id="jingpinview" src="http://127.0.0.1:41601/admin/index?typeid=0&page=0" style="height:100%;border:0px solid red;" httpreferrer="www.jingpinzy.com" nodeintegration disablewebsecurity="on" autosize="on" plugins="on" allowpopups="on"></webview>
          </div>
          <div style="display: none;height:100%;width:100%">
            <webview id="jisuyunboview" src="http://127.0.0.1:41601/admin/jisuyunbo?typeid=0&page=0" style="height:100%;border:0px solid red;" nodeintegration disablewebsecurity="on" autosize="on" autosize="on" plugins="on" allowpopups="on"></webview>
          </div>
          <div style="display: none;height:100%;width:100%">
            <webview id="yongjiuyunview" src="http://127.0.0.1:41601/admin/yongjiuyun?typeid=0&page=0" style="height:100%;border:0px solid red;" nodeintegration disablewebsecurity="on" autosize="on" autosize="on" plugins="on" allowpopups="on"></webview>
          </div>
          <div style="display: none;height:100%;width:100%">
            <webview id="zuidaziyuanview" src="http://127.0.0.1:41601/admin/zuidaziyuan?typeid=0&page=0" style="height:100%;border:0px solid red;" nodeintegration disablewebsecurity="on" autosize="on" autosize="on" plugins="on" allowpopups="on"></webview>
          </div>
          <div style="display: none;height:100%;width:100%">
            <webview id="kuboziyuanview" src="http://127.0.0.1:41601/admin/kuboziyuan?typeid=0&page=0" style="height:100%;border:0px solid red;" nodeintegration disablewebsecurity="on" autosize="on" autosize="on" plugins="on" allowpopups="on"></webview>
          </div>
          <div style="display: none;height:100%;width:100%">
            <webview id="okziyuanview" src="http://127.0.0.1:41601/admin/okziyuan?typeid=0&page=0" style="height:100%;border:0px solid red;" nodeintegration disablewebsecurity="on" autosize="on" autosize="on" plugins="on" allowpopups="on"></webview>
          </div>
        </div>
      </div>
      <!-- <div class="tab-pane fade" id="jisuyunbo" style="height:100%;border:0px solid red">
      </div> -->
    </div>
  </div>
  <!-- <div id="right">
      <h4 id="window-haoyou">播放列表</h4>
      <div id="window-haoyou-reply">msg</div>
      <ul>
          <li></li>
          <li></li>
      </ul>
  </div> -->
</div>
</body>
<script>
  console.log(process);
  require('./koa/app.js');
  $('.yingshileft-child').click(function() {
    $(this).parent().next().children().eq($(this).index()).show().siblings().hide();
    $(this).css({
      "background-color": "#fff",
      "color": "#333",
      "border-left": "5px solid #333"
    }).siblings().css({ "background-color": "#333", "color": "#fff" });
  })
  ////////精品资源网
  var webviewjingpin = document.getElementById("jingpinview");
  // webviewjingpin.addEventListener("did-start-loading", () => {
  //     webviewjingpin.openDevTools({ mode: 'detach' });
  // });
  /*var webview = document.getElementById("foohome");
  webview.addEventListener('dom-ready', () => {
      console.log("URL地址为：" + webview.getURL());
      const webContents = webview.getWebContents();
      webContents.on('new-window', (event, url) => {
          event.preventDefault();
          webview.loadURL(url);
      });
  });
  webview.addEventListener('console-message', e => {
      console.log('webview: ' + e.message);
  });*/
  webviewjingpin.addEventListener('console-message', e => {
    // console.log('播放地址为: ' + e.message);
    let url = e.message.split("|")[0];
    let title = e.message.split("|")[1];
    console.log(title + url);
    if (url.indexOf(".m3u8") > 0) {
      playVideo(url);
      $("#vediotitle").text(title);
    }
  });
  ///////////极速云播
  var webviewjisuyunbo = document.getElementById("jisuyunboview");
  // webviewjisuyunbo.addEventListener("did-start-loading", () => {
  //     webviewjisuyunbo.openDevTools({ mode: 'detach' });
  // });
  webviewjisuyunbo.addEventListener('console-message', e => {
    // console.log('播放地址为: ' + e.message);
    let url = e.message.split("|")[0];
    let title = e.message.split("|")[1];
    console.log(title + url);
    if (url.indexOf(".m3u8") > 0) {
      playVideo(url);
      $("#vediotitle").text(title);
    }
  });
  ///////////永久云
  var webviewyongjiuyun = document.getElementById("yongjiuyunview");
  // webviewyongjiuyun.addEventListener("did-start-loading", () => {
  //     webviewyongjiuyun.openDevTools({ mode: 'detach' });
  // });
  webviewyongjiuyun.addEventListener('console-message', e => {
    // console.log('播放地址为: ' + e.message);
    let url = e.message.split("|")[0];
    let title = e.message.split("|")[1];
    console.log(title + url);
    if (url.indexOf(".m3u8") > 0) {
      playVideo(url);
      $("#vediotitle").text(title);
    }
  });
  ///////////最大资源
  var webviewzuidaziyuan = document.getElementById("zuidaziyuanview");
  // webviewzuidaziyuan.addEventListener("did-start-loading", () => {
  //     webviewzuidaziyuan.openDevTools({ mode: 'detach' });
  // });
  webviewzuidaziyuan.addEventListener('console-message', e => {
    // console.log('播放地址为: ' + e.message);
    let url = e.message.split("|")[0];
    let title = e.message.split("|")[1];
    console.log(title + url);
    if (url.indexOf(".m3u8") > 0) {
      playVideo(url);
      $("#vediotitle").text(title);
    }
  });
  ///////////酷播资源
  var webviewkuboziyuan = document.getElementById("kuboziyuanview");
  // webviewkuboziyuan.addEventListener("did-start-loading", () => {
  //     webviewkuboziyuan.openDevTools({ mode: 'detach' });
  // });
  webviewkuboziyuan.addEventListener('console-message', e => {
    // console.log('播放地址为: ' + e.message);
    let url = e.message.split("|")[0];
    let title = e.message.split("|")[1];
    console.log(title + url);
    if (url.indexOf(".m3u8") > 0) {
      playVideo(url);
      $("#vediotitle").text(title);
    }
  });
  ///////////OK资源
  var webviewokziyuan = document.getElementById("okziyuanview");
  // webviewokziyuan.addEventListener("did-start-loading", () => {
  //     webviewokziyuan.openDevTools({ mode: 'detach' });
  // });
  webviewokziyuan.addEventListener('console-message', e => {
    // console.log('播放地址为: ' + e.message);
    let url = e.message.split("|")[0];
    let title = e.message.split("|")[1];
    console.log(title + url);
    if (url.indexOf(".m3u8") > 0) {
      playVideo(url);
      $("#vediotitle").text(title);
    }
  });
  var videoplayer;
  $(function() {
    var options = {
      techOrder: ["html5", "flash", "other supported tech"],
      bigPlayButton: false,
      textTrackDisplay: false,
      posterImage: false,
      errorDisplay: false,
      control: {
        captionsButton: false,
        chaptersButton: false,
        subtitlesButton: false,
        liveDisplay: false,
        playbackRateMenuButton: false
      }
    }
    videoplayer = videojs('videoCon', options, function onPlayerReady() {
      // videojs.log('播放器已经准备好了!');
      // In this context, `this` is the player that was created by Video.js.<br>  // 注意，这个地方的上下文， `this` 指向的是Video.js的实例对像player
      // this.src("http://youku.com-youku.com/20180317/LhrheHJk/index.m3u8");
      // this.load();
      // this.play();
      videoplayer.volume(0.1);
      // How about an event listener?<br>  // 如何使用事件监听？
      this.on('ended', function() {
        videojs.log('播放结束了!');
      });
      this.on('waiting', function() {
        console.log('onwaiting执行成功!');
        $("#videoMsg").show();
      });
      this.on('canplay', function() {
        $("#videoMsg").hide();
      });
    });
    document.addEventListener("fullscreenchange", function() {
      console.log(document.fullscreen);
      // fullscreenState.innerHTML = (document.fullscreen) ? "" : "not ";
    }, false);
    document.onkeyup = function(event) { //键盘事件
      // console.log(video.volume.toFixed(1));
      var e = event || window.event || arguments.callee.caller.arguments[0];
      // console.log(e.keyCode);
      if (e && e.keyCode == 13) { // 按enter键
        // toggleFullScreen();
        // document.getElementById('videoCon').requestFullScreen();
        // document.requestFullscreen();
        // videoplayer.enterFullScreen();
      }
      if (e && e.keyCode == 38) { // 按 向上键
        if (videoplayer.volume().toFixed(1) < 1) {
          videoplayer.volume(videoplayer.volume() + 0.1);
        }
      }
      if (e && e.keyCode == 40) { // 按 向下键
        if (videoplayer.volume().toFixed(1) > 0) {
          videoplayer.volume(videoplayer.volume() - 0.1);
        }
      }
      if (e && e.keyCode == 37) { // 按 向左键
        videoplayer.currentTime(parseFloat(videoplayer.currentTime() - 30))
      }
      if (e && e.keyCode == 39) { // 按 向右键
        videoplayer.currentTime(parseFloat(videoplayer.currentTime() + 30))
      }
    };
    $('#videoCon').bind('mousewheel', function(event, delta) {
      var dir = delta > 0 ? 'Up' : 'Down';
      if (dir == 'Up') {
        if (videoplayer.volume().toFixed(1) < 1) {
          videoplayer.volume(videoplayer.volume() + 0.1);
        }
      } else {
        if (videoplayer.volume().toFixed(1) > 0) {
          videoplayer.volume(videoplayer.volume() - 0.1);
        }
      }
    });
  })

  function playVideo(url) {
    $('#myTab a[href="#home"]').tab('show');
    videoplayer.src(encodeURI(url));
    videoplayer.load();
    // player.width(300).height(200);
    videoplayer.play();
  }

  function pausePlay() {
    videoplayer.pause();
  }

  function showRizhi() {
    layx.iframe('localsite', '更新日志', 'rizhi.html', {
      type: 'url',
      useFrameTitle: true,
      movable: false,
      minMenu: false,
      maxMenu: false,
      // minWidth:50,
      // minHeight:50,
      // width:100,
      dragInTopToMax: false,
      event: {
        onload: {
          after: function(layxWindow, winform) {
            layx.max(winform.id);
          }
        }
      }
    });
  }

</script>
</html>
